<!DOCTYPE HTML>
<html>
<head>
    <!--申明当前页面的编码集-->
    <meta charset="utf-8">
    <!--网页标题-->
    <title></title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            width: 100%;
            background-color: #f6faff;
        }
    </style>
</head>
<body>
    <canvas id="gallery-canvas"></canvas>
</body>
<script src="easeljs.min.js"></script>
<script src="time-gallery.min.js"></script>
<script>
    var picc = new TimeGallery({
        id: 'gallery-canvas',
        width: 750,
        resourcesPath: 'http://n.sinaimg.cn/gd/1018/picc/69/',
        resources: [
            { src: 'start_touch_text.png', id: 'start_touch_text' },
            { src: 'gallery_balloon_1.png', id: 'gallery_balloon_1' },
            { src: 'gallery_balloon_2.png', id: 'gallery_balloon_2' },
            { src: 'scene_1_bg.png', id: 'scene_1_bg' },
            { src: 'scene_tree_1.png', id: 'scene_tree_1' },
            { src: 'scene_tree_2.png', id: 'scene_tree_2' },
            { src: 'scene_tree_3.png', id: 'scene_tree_3' },
            { src: 'scene_tree_4.png', id: 'scene_tree_4' },
            { src: 'scene_tree_5.png', id: 'scene_tree_5' },
            { src: 'gallery_text_1_new.png', id: 'gallery_text_1' },
            { src: 'gallery_text_2_new.png', id: 'gallery_text_2' },
            { src: 'gallery_text_3_new.png', id: 'gallery_text_3' },
            { src: 'gallery_text_4_new.png', id: 'gallery_text_4' },
            { src: 'gallery_text_5_new.png', id: 'gallery_text_5' },
            { src: 'gallery_text_6_new.png', id: 'gallery_text_6' },
            { src: 'gallery_text_7_new.png', id: 'gallery_text_7' },
            { src: 'gallery_text_8_new.png', id: 'gallery_text_8' },
            { src: 'gallery_text_9_new.png', id: 'gallery_text_9' },
            { src: 'gallery_text_10_new.png', id: 'gallery_text_10' },
            { src: 'gallery_text_11_new.png', id: 'gallery_text_11' },
            { src: 'gallery_text_12_new.png', id: 'gallery_text_12' },
            { src: 'gallery_text_13_new.png', id: 'gallery_text_13' },
            { src: 'gallery_text_14_new.png', id: 'gallery_text_14' },
            { src: 'gallery_text_15_new.png', id: 'gallery_text_15' },
            { src: 'ribbon_1.png', id: 'ribbon_1' },
            { src: 'ribbon_2.png', id: 'ribbon_2' },
            { src: 'ribbon_3.png', id: 'ribbon_3' },
            { src: 'ribbon_4.png', id: 'ribbon_4' },
            { src: 'ribbon_5.png', id: 'ribbon_5' },
            { src: 'scene_2_cutting_1.png', id: 'scene_2_cutting_1' },
            { src: 'scene_2_cutting_2.png', id: 'scene_2_cutting_2' },
            { src: 'scene_2_cutting_3.png', id: 'scene_2_cutting_3' },
            { src: 'scene_2_cutting_4.png', id: 'scene_2_cutting_4' },
            { src: 'scene_2_silk_1.png', id: 'scene_2_silk_1' },
            { src: 'scene_2_silk_2.png', id: 'scene_2_silk_2' },
            { src: 'scene_2_silk_3.png', id: 'scene_2_silk_3' },
            { src: 'scene_2_silk_4.png', id: 'scene_2_silk_4' },
            { src: 'scene_2_silk_5.png', id: 'scene_2_silk_5' },
            { src: 'scene_2_silk_6.png', id: 'scene_2_silk_6' },
            { src: 'scene_2_silk_7.png', id: 'scene_2_silk_7' },
            { src: 'scene_3_bg.png', id: 'scene_3_bg' },
            { src: 'scene_3_up.png', id: 'scene_3_up' },
            { src: 'scene_3_hammer.png', id: 'scene_3_hammer' },
            { src: 'scene_3_hand_1.png', id: 'scene_3_hand_1' },
            { src: 'scene_3_hand_2.png', id: 'scene_3_hand_2' },
            { src: 'scene_3_hand_3.png', id: 'scene_3_hand_3' },
            { src: 'scene_3_hand_4.png', id: 'scene_3_hand_4' },
            { src: 'scene_3_build_1.png', id: 'scene_3_build_1' },
            { src: 'scene_3_build_2.png', id: 'scene_3_build_2' },
            { src: 'scene_3_build_3.png', id: 'scene_3_build_3' },
            { src: 'scene_3_airship.png', id: 'scene_3_airship' },
            { src: 'scene_3_left_hand.png', id: 'scene_3_left_hand' },
            { src: 'scene_3_right_hand.png', id: 'scene_3_right_hand' },
            { src: 'scene_3_heart.png', id: 'scene_3_heart' },
            { src: 'scene_3_heart_text.png', id: 'scene_3_heart_text' },
            { src: 'scene_4_rocket.png', id: 'scene_4_rocket' },
            { src: 'scene_4_bg_build_1.png', id: 'scene_4_bg_build_1' },
            { src: 'scene_4_cloud_1.png', id: 'scene_4_cloud_1' },
            { src: 'scene_4_cloud_2.png', id: 'scene_4_cloud_2' },
            { src: 'scene_4_cloud_3.png', id: 'scene_4_cloud_3' },
            { src: 'scene_4_cloud_4.png', id: 'scene_4_cloud_4' },
            { src: 'scene_4_cloud_5.png', id: 'scene_4_cloud_5' },
            { src: 'scene_4_cloud_6.png', id: 'scene_4_cloud_6' },
            { src: 'scene_4_cloud_7.png', id: 'scene_4_cloud_7' },
            { src: 'scene_4_cloud_8.png', id: 'scene_4_cloud_8' },
            { src: 'scene_4_cloud_9.png', id: 'scene_4_cloud_9' },
            { src: 'scene_4_cloud_10.png', id: 'scene_4_cloud_10' },
            { src: 'scene_4_cloud_11.png', id: 'scene_4_cloud_11' },
            { src: 'scene_4_cloud_12.png', id: 'scene_4_cloud_12' },
            { src: 'scene_4_cloud_13.png', id: 'scene_4_cloud_13' },

            { src: 'scene_4_map.png', id: 'scene_4_map' },
            { src: 'scene_4_map_light_1.png', id: 'scene_4_map_light_1' },
            { src: 'scene_4_map_light_2.png', id: 'scene_4_map_light_2' },
            { src: 'scene_4_map_light_3.png', id: 'scene_4_map_light_3' },
            { src: 'scene_4_map_light_4.png', id: 'scene_4_map_light_4' },
            { src: 'scene_4_map_light_5.png', id: 'scene_4_map_light_5' },
            { src: 'scene_4_map_light_6.png', id: 'scene_4_map_light_6' },
            { src: 'scene_4_map_light_7.png', id: 'scene_4_map_light_7' },
            { src: 'scene_4_map_light_8.png', id: 'scene_4_map_light_8' },
            { src: 'scene_4_plane_1.png', id: 'scene_4_plane_1' },
            { src: 'scene_4_plane_2.png', id: 'scene_4_plane_2' },
            { src: 'scene_4_plane_3.png', id: 'scene_4_plane_3' },
            { src: 'scene_4_plane_4.png', id: 'scene_4_plane_4' },
            { src: 'scene_4_transit_cloud.png', id: 'scene_4_transit_cloud' },

            { src: 'scene_4_newspaper_1.png', id: 'scene_4_newspaper_1' },
            { src: 'scene_4_newspaper_2.png', id: 'scene_4_newspaper_2' },
            { src: 'scene_4_newspaper_3.png', id: 'scene_4_newspaper_3' },
            { src: 'scene_4_newspaper_4.png', id: 'scene_4_newspaper_4' },
            { src: 'scene_4_newspaper_5.png', id: 'scene_4_newspaper_5' },
            { src: 'scene_4_newspaper_6.png', id: 'scene_4_newspaper_6' },

            { src: 'scene_4_balloon.png', id: 'scene_4_balloon' },
        ],
        data: canvasData,
        endTime: 20000,             // 自定义时间轴的结束时间
        onEnd: function () {
            console.log('结束回调')
        }
    });

    picc.play();
   
    function canvasData(gallery) {
        let duration = gallery.height/2;
        return [
            {
                id: 'start_touch_text',
                type: 'bitmap',
                image: gallery.getImage('start_touch_text'),
                prop: {
                    y: 230,
                    x: (750 - gallery.getImage('start_touch_text').width)/2,
                }
            },
            {
                id: 'scene_bg_wrap',
                children: [
                    {
                        id: 'scene_1_bg',
                        type: 'bitmap',
                        image: gallery.getImage('scene_1_bg'),
                        prop: {
                            y: 1045,
                        }
                    },
                    {
                        id: 'scene_3_bg',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_bg'),
                        prop: {
                            y: 4734,
                        }
                    },
                ]
            },
            {
                id: 'scene_1_wrap',
                prop: {
                    y: 1045,
                },
                children: [
                    {
                        id: 'scene_1_balloon_1',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_1'),
                        prop: {
                            x: 512,
                            y: 498,
                            scaleX: 0.8,
                            scaleY: 0.8,
                        },
                        animation: {
                            y: 498 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_2',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_1'),
                        prop: {
                            x: 48,
                            y: 566,
                            scaleX: 0.8,
                            scaleY: 0.8,
                        },
                        animation: {
                            y: 566 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_3',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_2'),
                        prop: {
                            x: 382,
                            y: 586,
                            scaleX: 0.85,
                            scaleY: 0.85,
                        },
                        animation: {
                            y: 586 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_4',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_2'),
                        prop: {
                            x: 74,
                            y: 734,
                        },
                        animation: {
                            y: 734 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_5',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_2'),
                        prop: {
                            x: 646,
                            y: 846,
                            scaleX: 0.7,
                            scaleY: 0.7,
                        },
                        animation: {
                            y: 846 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_6',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_1'),
                        prop: {
                            x: 32,
                            y: 856,
                            scaleX: 0.7,
                            scaleY: 0.7,
                        },
                        animation: {
                            y: 856 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_balloon_7',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_balloon_1'),
                        prop: {
                            x: 406,
                            y: 856,
                        },
                        animation: {
                            y: 856 - gallery.height,
                            duration: gallery.height,
                        }
                    },
                    {
                        id: 'scene_1_text',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_1'),
                        prop: {
                            x: 504,
                            y: 990 + duration/2,
                            alpha: 0,
                        },
                        animation: {
                            alpha: 1,
                            y: 990,
                            duration: duration/2
                        }
                    }
                ]
            },
            {
                id: 'scene_2_wrap',
                prop: {
                    y: 2505
                },
                children: [
                    {
                        id: 'scene_2_text',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_2'),
                        prop: {
                            x: -gallery.getImage('gallery_text_2').width,
                            y: 246,
                            alpha: 0,
                        },
                        animation: {
                            alpha: 1,
                            x: 76,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_tree',
                        type: 'bitmap',
                        image: gallery.getImage('scene_tree_1'),
                        prop: {
                            x: -gallery.getImage('scene_tree_1').width,
                            y: 640,
                        },
                        animation: {
                            x: 0,
                            duration,
                        }
                    },
                    {
                        id: 'scene_2_ribbon_1',
                        type: 'bitmap',
                        image: gallery.getImage('ribbon_1'),
                        prop: {
                            x: 442,
                            y: 620,
                            regX: gallery.getImage('ribbon_1').width/2,
                            regY: gallery.getImage('ribbon_1').height/2,
                            rotation: 0,
                        },
                        animation: {
                            y: 720,
                            rotation: 360,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_ribbon_2',
                        type: 'bitmap',
                        image: gallery.getImage('ribbon_2'),
                        prop: {
                            x: 322,
                            y: 678,
                            regX: gallery.getImage('ribbon_2').width/2,
                            regY: gallery.getImage('ribbon_2').height/2,
                            rotation: 0,
                        },
                        animation: {
                            y: 778,
                            rotation: 270,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_ribbon_3',
                        type: 'bitmap',
                        image: gallery.getImage('ribbon_3'),
                        prop: {
                            x: 160,
                            y: 958,
                            regX: gallery.getImage('ribbon_3').width/2,
                            regY: gallery.getImage('ribbon_3').height/2,
                            rotation: 90,
                        },
                        animation: {
                            startById: 'scene_2_ribbon_1',
                            y: 1258,
                            rotation: 0,
                            duration: gallery.height * 2
                        }
                    },
                    {
                        id: 'scene_2_ribbon_4',
                        type: 'bitmap',
                        image: gallery.getImage('ribbon_4'),
                        prop: {
                            x: 384,
                            y: 932,
                            regX: gallery.getImage('ribbon_4').width/2,
                            regY: gallery.getImage('ribbon_4').height/2,
                            rotation: 120,
                        },
                        animation: {
                            startById: 'scene_2_ribbon_1',
                            y: 1232,
                            rotation: 0,
                            duration: gallery.height * 2
                        }
                    },
                    {
                        id: 'scene_2_ribbon_5',
                        type: 'bitmap',
                        image: gallery.getImage('ribbon_5'),
                        prop: {
                            x: 532,
                            y: 946,
                            regX: gallery.getImage('ribbon_5').width/2,
                            regY: gallery.getImage('ribbon_5').height/2,
                            rotation: 70,
                        },
                        animation: {
                            startById: 'scene_2_ribbon_1',
                            y: 1246,
                            rotation: 0,
                            duration: gallery.height * 2
                        }
                    },
                    {
                        id: 'scene_2_cutting',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_cutting_1'),
                        prop: {
                            x: 244,
                            y: 924,
                        },
                        animation: {
                            top: -gallery.height/3,
                            sprite: [
                                gallery.getImage('scene_2_cutting_1'),
                                gallery.getImage('scene_2_cutting_2'),
                                gallery.getImage('scene_2_cutting_3'),
                                gallery.getImage('scene_2_cutting_4'),
                            ],
                            duration,
                        }
                    },
                    {
                        id: 'scene_2_silk_2',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_2'),
                        prop: {
                            x: 750,
                            y: 1144,
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_2_silk_2').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_1',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_1'),
                        prop: {
                            x: -gallery.getImage('scene_2_silk_1').width,
                            y: 966,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_3',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_3'),
                        prop: {
                            x: -gallery.getImage('scene_2_silk_3').width,
                            y: 1774,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_7',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_7'),
                        prop: {
                            x: 750,
                            y: 1690,
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_2_silk_7').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_6',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_6'),
                        prop: {
                            x: -gallery.getImage('scene_2_silk_6').width,
                            y: 1628,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_5',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_5'),
                        prop: {
                            x: 750,
                            y: 1430,
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_2_silk_5').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_2_silk_4',
                        type: 'bitmap',
                        image: gallery.getImage('scene_2_silk_4'),
                        prop: {
                            x: -gallery.getImage('scene_2_silk_4').width,
                            y: 1176,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                ]
            },
            {
                id: 'scene_3_wrap',
                prop: {
                    y: 4734
                },
                children: [
                    {
                        id: 'scene_3_hammer',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_hammer'),
                        prop: {
                            x: 254 + gallery.getImage('scene_3_hammer').width/2,
                            y: 480 + gallery.getImage('scene_3_hammer').height/2,
                            rotation: -60,
                            regX: gallery.getImage('scene_3_hammer').width/2,
                            regY: gallery.getImage('scene_3_hammer').height/2,
                        },
                        animation: {
                            x: 354 + gallery.getImage('scene_3_hammer').width/2,
                            y: 580 + gallery.getImage('scene_3_hammer').height/2,
                            rotation: 0,
                            duration: gallery.height/3,
                        }
                    },
                    {
                        id: 'scene_3_text_1',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_3'),
                        prop: {
                            x: 0,
                            y: 402,
                            alpha: 0
                        },
                        animation: {
                            afterById: 'scene_3_hammer',
                            x: 65,
                            alpha: 1,
                            duration: gallery.height/3,
                        }
                    },
                    {
                        id: 'scene_3_up',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_up'),
                        prop: {
                            x: -68,
                            y: 524,
                            alpha: 0,
                        },
                        animation: {
                            afterById: 'scene_3_hammer',
                            musicById: 'drum',
                            x: 68,
                            y: 474,
                            alpha: 1,
                            duration: gallery.height/3,
                        }
                    },
                    {
                        id: 'scene_3_text_2',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_4'),
                        prop: {
                            x: 34,
                            y: 1074,
                            alpha: 0
                        },
                        animation: {
                            y: 974,
                            alpha: 1,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_text_3',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_5'),
                        prop: {
                            x: 116,
                            y: 1642,
                            alpha: 0
                        },
                        animation: {
                            y: 1542,
                            alpha: 1,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_hand_wrap',
                        prop: {
                            y: 1760,
                        },
                        children: [
                            {
                                id: 'scene_3_hand_1',
                                type: 'bitmap',
                                image: gallery.getImage('scene_3_hand_1'),
                                prop: {
                                    x: 5,
                                    y: 96,
                                    alpha: 0,
                                },
                                animation: {
                                    x: 105,
                                    alpha: 1,
                                    duration
                                }
                            },
                            {
                                id: 'scene_3_hand_2',
                                type: 'bitmap',
                                image: gallery.getImage('scene_3_hand_2'),
                                prop: {
                                    x: 58,
                                    y: -80,
                                    alpha: 0,
                                },
                                animation: {
                                    startById: 'scene_3_hand_1',
                                    x: 158,
                                    y: 20,
                                    alpha: 1,
                                    duration
                                }
                            },
                            {
                                id: 'scene_3_hand_3',
                                type: 'bitmap',
                                image: gallery.getImage('scene_3_hand_3'),
                                prop: {
                                    x: 396,
                                    y: -100,
                                    alpha: 0,
                                },
                                animation: {
                                    startById: 'scene_3_hand_1',
                                    x: 296,
                                    y: 0,
                                    alpha: 1,
                                    duration
                                }
                            },
                            {
                                id: 'scene_3_hand_4',
                                type: 'bitmap',
                                image: gallery.getImage('scene_3_hand_4'),
                                prop: {
                                    x: 444,
                                    y: -38,
                                    alpha: 0,
                                },
                                animation: {
                                    startById: 'scene_3_hand_1',
                                    x: 344,
                                    y: 62,
                                    alpha: 1,
                                    duration
                                }
                            },
                        ]
                    },
                    {
                        id: 'scene_3_text_4',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_6'),
                        prop: {
                            x: 528,
                            y: 1970,
                            alpha: 0
                        },
                        animation: {
                            y: 1870,
                            alpha: 1,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_build_1',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_build_1'),
                        prop: {
                            x: 750,
                            y: 2044,
                        },
                        animation: {
                            startById: 'scene_3_text_4',
                            x: 348,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_text_5',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_6'),
                        prop: {
                            x: 750,
                            y: 2978,
                            alpha: 0
                        },
                        animation: {
                            x: 460,
                            alpha: 1,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_build_2',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_build_2'),
                        prop: {
                            x: -gallery.getImage('scene_3_build_2').width,
                            y: 2580,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_build_3',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_build_3'),
                        prop: {
                            x: 750,
                            y: 3128,
                        },
                        animation: {
                            top: -gallery.height/3,
                            x: 266,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_airship',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_airship'),
                        prop: {
                            x: 750,
                            y: 3236,
                        },
                        animation: {
                            x: -gallery.getImage('scene_3_airship').width,
                            duration: gallery.height
                        }
                    },
                    {
                        id: 'scene_3_text_6',
                        type: 'bitmap',
                        image: gallery.getImage('gallery_text_7'),
                        prop: {
                            x: -gallery.getImage('gallery_text_7').width,
                            y: 3612,
                            alpha: 0
                        },
                        animation: {
                            startById: 'scene_3_build_3',
                            x: 60,
                            alpha: 1,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_tree_1',
                        type: 'bitmap',
                        image: gallery.getImage('scene_tree_2'),
                        prop: {
                            x: -gallery.getImage('scene_tree_2').width,
                            y: 2002,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_tree_2',
                        type: 'bitmap',
                        image: gallery.getImage('scene_tree_3'),
                        prop: {
                            x: 750,
                            y: 2343,
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_tree_3').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_tree_3',
                        type: 'bitmap',
                        image: gallery.getImage('scene_tree_4'),
                        prop: {
                            x: -gallery.getImage('scene_tree_4').width,
                            y: 3068,
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_tree_4',
                        type: 'bitmap',
                        image: gallery.getImage('scene_tree_5'),
                        prop: {
                            x: 750,
                            y: 3406,
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_tree_5').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_left_hand',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_left_hand'),
                        prop: {
                            x: -gallery.getImage('scene_3_left_hand').width,
                            y: 3891
                        },
                        animation: {
                            x: 0,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_right_hand',
                        type: 'bitmap',
                        image: gallery.getImage('scene_3_right_hand'),
                        prop: {
                            x: 750,
                            y: 3879
                        },
                        animation: {
                            x: 750 - gallery.getImage('scene_3_right_hand').width,
                            duration
                        }
                    },
                    {
                        id: 'scene_3_heart_wrap',
                        prop: {
                            y: 4007,
                        },
                        children: [
                            {
                                id: 'scene_3_heart_scale_wrap',
                                prop: {
                                    x: (gallery.width - gallery.getImage('scene_3_heart').width)/2 + gallery.getImage('scene_3_heart').width/2,
                                    y: gallery.getImage('scene_3_heart').height/2,
                                    scaleX: 1,
                                    scaleY: 1,
                                    regX: gallery.getImage('scene_3_heart').width/2,
                                    regY: gallery.getImage('scene_3_heart').height/2,
                                },
                                animation: {
                                    afterById: 'scene_3_left_hand',
                                    scaleX: 50,
                                    scaleY: 50,
                                    duration: gallery.height
                                },
                                children: [
                                    {
                                        id: 'scene_3_heart',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_3_heart'),
                                    },
                                ]
                            },
                            {
                                id: 'scene_3_heart_text',
                                type: 'bitmap',
                                image: gallery.getImage('scene_3_heart_text'),
                                prop: {
                                    x: (gallery.width - gallery.getImage('scene_3_heart').width)/2,
                                    y: 0,
                                },
                                animation: {
                                    afterById: 'scene_3_left_hand',
                                    alpha: 0,
                                    duration: gallery.height/3
                                }
                            }
                        ]
                    },
                ]
            },
            {
                id: 'scene_4_wrap',
                prop: {
                    y: 10200,
                },
                children: [
                    {
                        id: 'scene_4_bg_wrap',
                        prop: {
                            y: 0
                        },
                        animation: {
                            // startById: 'scene_4_rocket',
                            top: -gallery.height/2 - 338,
                            y: 10662 * 2,
                            duration: 10662,
                        },
                        children: [
                            {
                                id: 'scene_4_bg_inner',
                                prop: {
                                    alpha: 0,
                                },
                                animation: {
                                    alpha: 1,
                                    duration: 100,
                                },
                                children: [
                                    {
                                        id: 'scene_4_bg',
                                        type: 'shape',
                                        graphics: {
                                            beginFill: ['#e8340c'],
                                            drawRect: [0, 0, 750, 7486 + gallery.height]
                                        },
                                        prop: {
                                            width: 750,
                                            height: 7486 + gallery.height,
                                            y: -7486 + gallery.height,
                                        },
                                    },
                                    {
                                        id: 'scene_4_bg_build_1',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_bg_build_1'),
                                        prop: {
                                            y: 458,
                                        }
                                    },
                                    {
                                        id: 'scene_4_map_wrap',
                                        prop: {
                                            x: gallery.width/2,
                                            y: -3276,
                                            scaleX: 1,
                                            scaleY: 1,
                                            regX: gallery.width/2,
                                        },
                                        animation: {
                                            top: -3332 * 2 - duration,
                                            y: -3276 - 856,
                                            scaleX: 0.3,
                                            scaleY: 0.3,
                                            duration: 856,
                                        },
                                        children: [
                                            {
                                                id: 'scene_4_map',
                                                type: 'bitmap',
                                                image: gallery.getImage('scene_4_map'),
                                                prop: {
                                                    x: 33,
                                                }
                                            },
                                            {
                                                id: 'scene_4_map_light',
                                                type: 'bitmap',
                                                image: gallery.getImage('scene_4_map_light_1'),
                                                prop: {
                                                    x: 206,
                                                    y: -56,
                                                },
                                                animation: {
                                                    top: -3332 * 2,
                                                    sprite: [
                                                        gallery.getImage('scene_4_map_light_1'),
                                                        gallery.getImage('scene_4_map_light_2'),
                                                        gallery.getImage('scene_4_map_light_3'),
                                                        gallery.getImage('scene_4_map_light_4'),
                                                        gallery.getImage('scene_4_map_light_5'),
                                                        gallery.getImage('scene_4_map_light_6'),
                                                        gallery.getImage('scene_4_map_light_7'),
                                                        gallery.getImage('scene_4_map_light_8'),
                                                    ],
                                                    duration,
                                                }
                                            },
                                        ]
                                    },
                                ],
                            },
                        ]
                    },
                    {
                        id: 'scene_4_rocket',
                        type: 'bitmap',
                        image: gallery.getImage('scene_4_rocket'),
                        prop: {
                            x: 88,
                            scaleX: 1,
                            scaleY: 1,
                        },
                        animation: {
                            top: -gallery.height/2 - 338,
                            x: gallery.width/2,
                            y: 3124,
                            scaleX: 0,
                            scaleY: 0,
                            duration: 3124,
                        }
                    },
                    {
                        id: 'scene_4_cloud_wrap',
                        animation: {
                            startById: 'scene_4_rocket',
                            y: 10662 * 2,
                            duration: 10662,
                        },
                        children: [
                            {
                                id: 'scene_4_cloud_inner',
                                prop: {
                                    alpha: 0,
                                },
                                animation: {
                                    alpha: 1,
                                    duration: 100,
                                },
                                children: [
                                    {
                                        id: 'scene_4_cloud_1',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_1'),
                                        prop: {
                                            x: 750,
                                            y: -362,
                                        },
                                        animation: {
                                            top: -362 * 2 - gallery.height/2,
                                            x: 750 - gallery.getImage('scene_4_cloud_1').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_2',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_2'),
                                        prop: {
                                            x: - gallery.getImage('scene_4_cloud_2').width,
                                            y: -1390,
                                        },
                                        animation: {
                                            top: -1390 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_3',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_1'),
                                        prop: {
                                            x: 750,
                                            y: -1516,
                                        },
                                        animation: {
                                            top: -1516 * 2 - gallery.height/2,
                                            x: 750 - 201,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_4',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_3'),
                                        prop: {
                                            x: 750,
                                            y: -2174,
                                        },
                                        animation: {
                                            top: -2174 * 2 - gallery.height/2,
                                            x: 750 - gallery.getImage('scene_4_cloud_3').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_5',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_4'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_4').width,
                                            y: -2372,
                                        },
                                        animation: {
                                            top: -2372 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_6',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_3'),
                                        prop: {
                                            x: 750,
                                            y: -2532,
                                            scaleX: 0.88,
                                            scaleY: 0.88,
                                        },
                                        animation: {
                                            top: -2532 * 2 - gallery.height/2,
                                            x: 750 - 260,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_7',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_4'),
                                        prop: {
                                            x: 750 + gallery.getImage('scene_4_cloud_4').width,
                                            y: -2924,
                                            scaleX: 0.8,
                                            scaleY: 0.8,
                                            skewY: 180,
                                            skewX: 360,
                                        },
                                        animation: {
                                            top: -2924 * 2 - gallery.height/2,
                                            x: 800,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_8',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_6'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_6').width,
                                            y: -3286,
                                        },
                                        animation: {
                                            top: -3286 * 2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_9',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_4'),
                                        prop: {
                                            x: 750 + gallery.getImage('scene_4_cloud_4').width,
                                            y: -3436,
                                            scaleX: 0.7,
                                            scaleY: 0.7,
                                            skewY: 180,
                                            skewX: 360,
                                        },
                                        animation: {
                                            top: -3436 * 2 - gallery.height/2,
                                            x: 760,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_10',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_3'),
                                        prop: {
                                            x: 750,
                                            y: -3682,
                                            scaleX: 0.9,
                                            scaleY: 0.9,
                                        },
                                        animation: {
                                            top: -3682 * 2 - gallery.height/2,
                                            x: 750 - 260,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_11',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_5'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_5').width,
                                            y: -3670,
                                            scaleX: 0.9,
                                            scaleY: 0.9,
                                        },
                                        animation: {
                                            top: -3670 * 2 - gallery.height/2,
                                            x: -gallery.getImage('scene_4_cloud_5').width + 175,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_12',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_5'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_5').width,
                                            y: -3670,
                                            scaleX: 0.9,
                                            scaleY: 0.9,
                                        },
                                        animation: {
                                            top: -3670 * 2 - gallery.height/2,
                                            x: -gallery.getImage('scene_4_cloud_5').width + 175,
                                            duration,
                                        }
                                    },

                                    {
                                        id: 'scene_4_cloud_13',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_7'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_7').width,
                                            y: -4046,
                                        },
                                        animation: {
                                            top: -4046 * 2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_15',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_9'),
                                        prop: {
                                            x: gallery.width,
                                            y: -4166,
                                        },
                                        animation: {
                                            top: -4166 * 2,
                                            x: gallery.width - gallery.getImage('scene_4_cloud_9').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_14',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_8'),
                                        prop: {
                                            x: gallery.width,
                                            y: -4186,
                                        },
                                        animation: {
                                            top: -4186 * 2 - gallery.height/2,
                                            x: gallery.width - gallery.getImage('scene_4_cloud_8').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_16',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_10'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_10').width,
                                            y: -4336,
                                        },
                                        animation: {
                                            top: -4336 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_17',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_11'),
                                        prop: {
                                            x: gallery.width,
                                            y: -4446,
                                        },
                                        animation: {
                                            top: -4446 * 2 - gallery.height/2,
                                            x: gallery.width - gallery.getImage('scene_4_cloud_11').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_18',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_12'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_12').width,
                                            y: -4492,
                                        },
                                        animation: {
                                            top: -4492 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },

                                    {
                                        id: 'scene_4_cloud_19',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_7'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_7').width,
                                            y: -4982,
                                        },
                                        animation: {
                                            top: -4982 * 2 - gallery.height/2,
                                            x: -(gallery.getImage('scene_4_cloud_7').width - 404),
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_20',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_13'),
                                        prop: {
                                            x: gallery.width,
                                            y: -5266,
                                        },
                                        animation: {
                                            top: -5266 * 2 - gallery.height/2,
                                            x: gallery.width - gallery.getImage('scene_4_cloud_13').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_cloud_21',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_cloud_7'),
                                        prop: {
                                            x: -gallery.getImage('scene_4_cloud_7').width,
                                            y: -5386,
                                        },
                                        animation: {
                                            top: -5386 * 2 - gallery.height/2,
                                            x: -(gallery.getImage('scene_4_cloud_7').width - 168),
                                            duration,
                                        }
                                    },

                                    {
                                        id: 'scene_4_text_1',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_9'),
                                        prop: {
                                            x: 290,
                                            y: 30,
                                            alpha: 0,
                                        },
                                        animation: {
                                            y: 230,
                                            alpha: 1,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_text_2',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_10'),
                                        prop: {
                                            x: -gallery.getImage('gallery_text_10').width,
                                            y: -704,
                                        },
                                        animation: {
                                            top: -704 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_text_3',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_11'),
                                        prop: {
                                            x: 750,
                                            y: -1106,
                                        },
                                        animation: {
                                            top: -1106 * 2 - gallery.height/2,
                                            x: 750 - gallery.getImage('gallery_text_11').width,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_text_4',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_12'),
                                        prop: {
                                            x: -gallery.getImage('gallery_text_12').width,
                                            y: -1876,
                                        },
                                        animation: {
                                            top: -1876 * 2 - gallery.height/2,
                                            x: 0,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_text_5',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_13'),
                                        prop: {
                                            x: 116,
                                            y: -3384,
                                            alpha: 0,
                                        },
                                        animation: {
                                            top: -3484 * 2 - gallery.height/2,
                                            y: -3484,
                                            alpha: 1,
                                            duration,
                                        }
                                    },
                                    {
                                        id: 'scene_4_text_6',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_14'),
                                        prop: {
                                            x: 352,
                                            y: -4678,
                                            alpha: 0,
                                        },
                                        animation: {
                                            top: -4678 * 2,
                                            y: -4778,
                                            alpha: 1,
                                            duration,
                                        }
                                    },

                                    {
                                        id: 'scene_4_plane',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_plane_1'),
                                        prop: {
                                            y: -3192,
                                            x: -gallery.getImage('scene_4_plane_1').width/2,
                                            scaleX: 0.7,
                                            scaleY: 0.7,
                                            regX: gallery.getImage('scene_4_plane_1').width/2,
                                        },
                                        animation: {
                                            top: -3192 * 2 - gallery.height/2,
                                            y: -6510,
                                            x: gallery.width/2,
                                            sprite: [
                                                gallery.getImage('scene_4_plane_1'),
                                                gallery.getImage('scene_4_plane_2'),
                                                gallery.getImage('scene_4_plane_3'),
                                                gallery.getImage('scene_4_plane_4'),
                                                gallery.getImage('scene_4_plane_1'),
                                                gallery.getImage('scene_4_plane_2'),
                                                gallery.getImage('scene_4_plane_3'),
                                                gallery.getImage('scene_4_plane_4'),
                                                gallery.getImage('scene_4_plane_1'),
                                                gallery.getImage('scene_4_plane_2'),
                                                gallery.getImage('scene_4_plane_3'),
                                                gallery.getImage('scene_4_plane_4'),
                                                gallery.getImage('scene_4_plane_1'),
                                                gallery.getImage('scene_4_plane_2'),
                                                gallery.getImage('scene_4_plane_3'),
                                                gallery.getImage('scene_4_plane_4'),
                                                gallery.getImage('scene_4_plane_1'),
                                                gallery.getImage('scene_4_plane_2'),
                                                gallery.getImage('scene_4_plane_3'),
                                                gallery.getImage('scene_4_plane_4'),
                                            ],
                                            duration: 3218,
                                        }
                                    },
                                    {
                                        id: 'scene_4_transit_cloud',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_transit_cloud'),
                                        prop: {
                                            y: -6458,
                                        }
                                    },

                                    {
                                        id: 'scene_4_balloon_1',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_balloon'),
                                        prop: {
                                            x: 548,
                                            y: -8058,
                                            scaleX: 0.6,
                                            scaleY: 0.6,
                                        },
                                        animation: {
                                            top: -8408 * 2 - gallery.height/3,
                                            y: -8058 - gallery.height * 3,
                                            duration: gallery.height * 1.1
                                        }
                                    },
                                    {
                                        id: 'scene_4_balloon_2',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_balloon'),
                                        prop: {
                                            x: 146,
                                            y: -8108,
                                            scaleX: 0.4,
                                            scaleY: 0.4,
                                        },
                                        animation: {
                                            top: -8408 * 2 - gallery.height/3,
                                            y: -8108 - gallery.height * 3,
                                            duration: gallery.height * 1.2
                                        }
                                    },
                                    {
                                        id: 'scene_4_balloon_3',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_balloon'),
                                        prop: {
                                            x: 284,
                                            y: -8208,
                                            scaleX: 0.85,
                                            scaleY: 0.85,
                                        },
                                        animation: {
                                            top: -8408 * 2 - gallery.height/3,
                                            y: -8208 - gallery.height * 3,
                                            duration: gallery.height * 1.15
                                        }
                                    },
                                    {
                                        id: 'scene_4_balloon_4',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_balloon'),
                                        prop: {
                                            x: 408,
                                            y: -8408,
                                        },
                                        animation: {
                                            top: -8408 * 2 - gallery.height/3,
                                            y: -8408 - gallery.height * 3,
                                            duration: gallery.height * 1.3
                                        }
                                    },
                                    {
                                        id: 'scene_4_balloon_5',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_balloon'),
                                        prop: {
                                            x: 102,
                                            y: -8308,
                                            scaleX: 0.3,
                                            scaleY: 0.3,
                                        },
                                        animation: {
                                            top: -8408 * 2 - gallery.height/2,
                                            y: -8308 - gallery.height * 3,
                                            duration: gallery.height * 1.25
                                        }
                                    },

                                    {
                                        id: 'scene_4_newspaper_4',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_4'),
                                        prop: {
                                            y: -7552,
                                            x: -500,
                                        },
                                        animation: {
                                            top: -7452 * 2,
                                            y: -7388,
                                            x: 78,
                                            duration: gallery.height
                                        }
                                    },
                                    {
                                        id: 'scene_4_newspaper_5',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_5'),
                                        prop: {
                                            y: -8158,
                                            x: 390,
                                        },
                                        animation: {
                                            top: -8058 * 2,
                                            y: -8058,
                                            x: -300,
                                            duration: gallery.height
                                        }
                                    },
                                    {
                                        id: 'scene_4_newspaper_6',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_6'),
                                        prop: {
                                            y: -8058,
                                            x: -100,
                                        },
                                        animation: {
                                            top: -8058 * 2,
                                            y: -7958,
                                            x: 400,
                                            duration: gallery.height
                                        }
                                    },
                                    {
                                        id: 'scene_4_newspaper_3',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_3'),
                                        prop: {
                                            y: -7188,
                                            x: 678,
                                        },
                                        animation: {
                                            top: -7064 * 2,
                                            y: -6988,
                                            x: 378,
                                            duration: gallery.height
                                        }
                                    },
                                    {
                                        id: 'scene_4_newspaper_2',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_2'),
                                        prop: {
                                            y: -7296,
                                            x: 384,
                                        },
                                        animation: {
                                            top: -7246 * 2,
                                            y: -6996,
                                            x: -300,
                                            duration: gallery.height
                                        }
                                    },
                                    {
                                        id: 'scene_4_newspaper_1',
                                        type: 'bitmap',
                                        image: gallery.getImage('scene_4_newspaper_1'),
                                        prop: {
                                            y: -7064,
                                            x: -100,
                                        },
                                        animation: {
                                            top: -7064 * 2,
                                            y: -6864,
                                            x: 224,
                                            duration: gallery.height
                                        }
                                    },

                                    {
                                        id: 'scene_4_text_7',
                                        type: 'bitmap',
                                        image: gallery.getImage('gallery_text_15'),
                                        prop: {
                                            y: -7270,
                                            x: 750,
                                            alpha: 0,
                                        },
                                        animation: {
                                            top: -7470 * 2 + gallery.height/3,
                                            x: 425,
                                            alpha: 1,
                                            duration,
                                        }
                                    },
                                ]
                            },
                        ],
                    },
                ]
            },
        ]
    }
</script>
</html>
 


 